import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

class Detail extends StatefulWidget {
  const Detail({Key? key}) : super(key: key);

  @override
  State<Detail> createState() => _DetailState();
}

class _DetailState extends State<Detail> {
  final GlobalKey _one = GlobalKey();
  BuildContext? myContext;

  // This is optional but if you need different configuration in
  // ShowcaseView then you can register new ShowcaseView
  final showcaseDetailScope = ShowcaseView.register(scope: "_detailsScreen");

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
      (_) => showcaseDetailScope
        ..startShowCase([_one], delay: const Duration(milliseconds: 200))
        ..addOnFinishCallback(_onShowcaseFinished)
        ..addOnDismissCallback(_onShowcaseDismissed),
    );
  }

  @override
  void dispose() {
    showcaseDetailScope
      ..removeOnFinishCallback(_onShowcaseFinished)
      ..removeOnDismissCallback(_onShowcaseDismissed);
    super.dispose();
  }

  void _onShowcaseFinished() {
    debugPrint("Showcase tour finished!");
  }

  void _onShowcaseDismissed(GlobalKey? dismissedAt) {
    debugPrint("Showcase dismissed $dismissedAt");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            Showcase(
              key: _one,
              title: 'Title',
              description: 'Desc',
              scope: '_detailsScreen',
              floatingActionWidget: FloatingActionWidget(
                left: 16,
                bottom: 16,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xffEE5366),
                    ),
                    onPressed: showcaseDetailScope.dismiss,
                    child: const Text(
                      'Close Showcase',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15,
                      ),
                    ),
                  ),
                ),
              ),
              child: InkWell(
                onTap: () {},
                child: const Text(
                  'Flutter Notification',
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            const Text(
              'Hi, you have new Notification from flutter group, open '
              'slack and check it out',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
            const SizedBox(
              height: 16,
            ),
            RichText(
              text: const TextSpan(
                style: TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Colors.black,
                ),
                children: [
                  TextSpan(text: 'Hi team,\n\n'),
                  TextSpan(
                    text: 'As some of you know, we’re moving to Slack for '
                        'our internal team communications. Slack is a '
                        'messaging app where we can talk, share files, '
                        'and work together. It also connects with tools '
                        'we already use, like [add your examples here], '
                        'plus 900+ other apps.\n\n',
                  ),
                  TextSpan(
                    text: 'Why are we moving to Slack?\n\n',
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                  TextSpan(
                    text: 'We want to use the best communication tools to '
                        'make our lives easier and be more productive. '
                        'Having everything in one place will help us '
                        'work together better and faster, rather than '
                        'jumping around between emails, IMs, texts and '
                        'a bunch of other programs. Everything you share '
                        'in Slack is automatically indexed and archived, '
                        'creating a searchable archive of all our work.',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
